<template>
    <base-page>
        <base-header title="核对结果"></base-header>
        <base-page-content class="px40 white-bg">
            <div class="row row-wrap between tc mt20" :class="['f22', 'f16'][+(words.length > 5)]">
                <ruby v-for="(item, index) in words" :key="item">
                    <div class="square48 center" :class="{active: item == word}">{{item == word ? '&nbsp;': item}}
                    </div>
                    <rt :class="['f18', 'f12'][+(words.length > 5)]">{{pinyins[index]}}</rt>
                </ruby>
            </div>
            <div class="row main-end mb10 f22">
                <md-icon class="m6" name="back" size="lg" @click="onBack"></md-icon>
                <md-icon name="volumn" size="lg" @click="onPlay"></md-icon>
            </div>
            <panel :word="word" ref="panel" @toDataURL="dataURL = $event"/>
            <div class="bottom mb50 mt20 row between">
                <base-link
                        :to="{name: 'result', params: {word: word, pinyin: pinyin, dataURL: dataURL, onSuccess: onSuccess}}">
                    <md-button type="primary" size="small" inline plain style="width: 40%" :inactive="dataURL == ''">
                        完成
                    </md-button>
                </base-link>
                <md-button type="warning" size="small" inline plain @click.native="onReset" style="width: 20%"
                           :inactive="dataURL == ''">重置
                </md-button>
            </div>
        </base-page-content>
    </base-page>
</template>
<script>
    import { getWordList, getMemoryIndex, currentWord, setNextWord, setPrevWord } from '@/utils/word';
    import panel from './panel';
    import {create_audio} from '@/utils/audio';
    import {executeSql} from '@/utils/web_sqlite';

    export default {
        data() {
            this.Text = getWordList();
            return {
                index: getMemoryIndex(),
                pinyins: '',
                words: '',
                dataURL: '',
                word: currentWord()
            };
        },
        computed: {
            pinyin() {
                const {words, pinyins, word} = this;
                return pinyins[words.indexOf(word)];
            }
        },
        methods: {
            onPlay() {
                create_audio(this.words).play();
            },
            prev() {
                this.word = setPrevWord() || this.word;
            },
            next() {
                this.word = setNextWord() || this.word;
            },
            // 从数据库获取拼音
            async updateWordsAndPinyin() {
                console.log(this.word);
                const [{total}] = await executeSql(`SELECT count(id) as total FROM sentence WHERE words LIKE "%${this.word}%"`);
                const [item] = await executeSql(`SELECT * FROM sentence WHERE words LIKE "%${this.word}%" ORDER BY words ASC LIMIT 1 OFFSET ${Math.floor(Math.random() * total)}`);
                let {words, spell} = item;
                spell = JSON.parse(spell);
                this.pinyins = spell.map(x => x[0]);
                this.words = words;
            },
            onBack() {
                this.$refs.panel && this.$refs.panel.onBack();
            },
            onReset() {
                this.$refs.panel && this.$refs.panel.onReset();
            },
            onSuccess() {
                this.next();
                this.onReset();
            }
        },
        components: {
            panel
        },
        watch: {
            word: {
                immediate: true,
                async handler() {
                    await this.updateWordsAndPinyin();
                    this.onPlay();
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .active {
        background: wheat;
    }
</style>

